/**
 * 性能对比组件
 * 展示传统方案与AI方案的性能对比数据和图表
 */

import { motion } from "framer-motion";
import {
    BarChart,
    Bar,
    RadarChart,
    Radar,
    XAxis,
    YAxis,
    CartesianGrid,
    PolarGrid,
    PolarAngleAxis,
    PolarRadiusAxis,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Cell,
} from "recharts";
import { efficiencyData, accuracyData } from "../../data/homeData";

interface PerformanceSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function PerformanceSection({ sectionRef }: PerformanceSectionProps) {
    return (
        <section ref={sectionRef} className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">性能对比</h2>
                </motion.div>
                
                <div className="grid md:grid-cols-2 gap-10">
                    {/* 处理效率与时间成本 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: -30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8">
                        <h3 className="text-2xl font-semibold text-blue-800 mb-6">处理效率与时间成本</h3>
                        
                        {/* 效率对比图表 */}
                        <div className="h-72 mb-8">
                            <ResponsiveContainer width="100%" height="100%">
                                <BarChart data={efficiencyData}>
                                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                    <XAxis dataKey="name" stroke="#64748b" />
                                    <YAxis stroke="#64748b" />
                                    <Tooltip
                                        contentStyle={{
                                            backgroundColor: "white",
                                            border: "none",
                                            borderRadius: "10px",
                                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                        }} />
                                    <Legend />
                                    <Bar dataKey="传统方案" name="传统方案" fill="#94a3b8" radius={[4, 4, 0, 0]} />
                                    <Bar dataKey="AI方案" name="AI方案" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                                </BarChart>
                            </ResponsiveContainer>
                        </div>
                        
                        {/* 关键指标对比 */}
                        <div className="grid grid-cols-2 gap-4">
                            <div className="bg-blue-50 p-4 rounded-xl">
                                <p className="text-sm text-blue-600 font-medium">传统人工筛选</p>
                                <p className="text-2xl font-bold text-blue-800 mt-1">8小时</p>
                                <p className="text-xs text-blue-500 mt-1">处理1000份简历</p>
                            </div>
                            <div className="bg-teal-50 p-4 rounded-xl">
                                <p className="text-sm text-teal-600 font-medium">AI简历解析</p>
                                <p className="text-2xl font-bold text-teal-800 mt-1">20分钟</p>
                                <p className="text-xs text-teal-500 mt-1">处理1000份简历</p>
                            </div>
                            <div className="bg-blue-50 p-4 rounded-xl">
                                <p className="text-sm text-blue-600 font-medium">传统招聘周期</p>
                                <p className="text-2xl font-bold text-blue-800 mt-1">15天</p>
                                <p className="text-xs text-blue-500 mt-1">从投递到初面反馈</p>
                            </div>
                            <div className="bg-teal-50 p-4 rounded-xl">
                                <p className="text-sm text-teal-600 font-medium">AI招聘周期</p>
                                <p className="text-2xl font-bold text-teal-800 mt-1">2.3天</p>
                                <p className="text-xs text-teal-500 mt-1">从投递到初面反馈</p>
                            </div>
                        </div>
                    </motion.div>
                    
                    {/* 准确率与多语言支持 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6,
                            delay: 0.2
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8">
                        <h3 className="text-2xl font-semibold text-blue-800 mb-6">准确率与多语言支持</h3>
                        
                        {/* 准确率雷达图 */}
                        <div className="h-72 mb-8">
                            <ResponsiveContainer width="100%" height="100%">
                                <RadarChart data={accuracyData}>
                                    <PolarGrid stroke="#e2e8f0" />
                                    <PolarAngleAxis dataKey="subject" stroke="#64748b" />
                                    <PolarRadiusAxis stroke="#64748b" />
                                    <Tooltip
                                        contentStyle={{
                                            backgroundColor: "white",
                                            border: "none",
                                            borderRadius: "10px",
                                            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                        }} />
                                    <Legend />
                                    <Radar
                                        name="传统方案"
                                        dataKey="传统方案"
                                        stroke="#94a3b8"
                                        fill="#94a3b8"
                                        fillOpacity={0.3} />
                                    <Radar
                                        name="AI方案"
                                        dataKey="AI方案"
                                        stroke="#10b981"
                                        fill="#10b981"
                                        fillOpacity={0.3} />
                                </RadarChart>
                            </ResponsiveContainer>
                        </div>
                        
                        {/* 多语言支持能力对比 */}
                        <div>
                            <h4 className="text-lg font-semibold text-blue-800 mb-4">多语言支持能力对比</h4>
                            <div className="overflow-x-auto">
                                <table className="w-full text-sm">
                                    <thead>
                                        <tr className="bg-blue-50">
                                            <th className="p-3 text-left font-semibold text-gray-800">语言</th>
                                            <th className="p-3 text-center font-semibold text-gray-800">传统方案</th>
                                            <th className="p-3 text-center font-semibold text-teal-800">AI解析方案</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-3 font-medium text-gray-800">中文</td>
                                            <td className="p-3 text-center text-gray-600">75.13%</td>
                                            <td className="p-3 text-center font-bold text-teal-700">96%</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-3 font-medium text-gray-800">英文</td>
                                            <td className="p-3 text-center text-gray-600">61.84%</td>
                                            <td className="p-3 text-center font-bold text-teal-700">89%</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-3 font-medium text-gray-800">日语</td>
                                            <td className="p-3 text-center text-gray-600">不支持</td>
                                            <td className="p-3 text-center font-bold text-teal-700">85%</td>
                                        </tr>
                                        <tr className="hover:bg-gray-50 transition-colors">
                                            <td className="p-3 font-medium text-gray-800">韩语</td>
                                            <td className="p-3 text-center text-gray-600">不支持</td>
                                            <td className="p-3 text-center font-bold text-teal-700">82%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}